<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>axios请求拦截器</h1>
    <button id="btn">发送请求</button>
    <script>

        /*axios拦截器
            我们通常使用axios与后台进行数据交互，axios是一款基于promise的封装库， 可以运行在浏览器端和node环境中

            特性：1.拦截请求和响应 2.取消请求 3.转换json 4.客户端房屋xsrf

            拦截器分为：请求拦截器和响应拦截器  使用：在请求或响应被then和catch处理前去拦截
        */

        /*请求拦截器
            use方法接收俩个回调函数，正常都会进入第一个回调函数中

            只有俩种情况会被触发异常处理的回调
            1.use额外配置第三个参数options
            2.当同时设置多个同类型拦截器的时候，如果第二个拦截器处理出现错误，则会执行第一个拦截器中的异常处理函数        
        */

        //先创建一个axios实例，然后配置这个实例 
        const myAxios = axios.create({
            baesURL: "/1",   //配置公共路径
            timeout:10000, //配置超时事件
            headers:{}  //配置请求头
        })
        
        //请求拦截器   interceptors拦截器 
        myAsios.interceptors.request.use((config) => {  
            alert("发送请求了");        //在请求拦截器中可以拿到axios配置对象，配置中的对象config，headers，common时请求头的配置
            return config;              //最后要把config返回出去
        }, (err) => {
            return Promise.reject(err.message);
         });


        /*
        myAxios.interceptors.request.use((config) => {
            alert("发送请求");
            return config;
        },(err) => {
            return Promise.reject(err.message)
        })


        */
        /*
        myAxios.interceptors.request.use((config) => {
            alert("发送请求"）;
            return config;
        }, (err) => {
            return Promise.reject(err.message);
        });
        */

        const oBtn = document.getElementById('btn')
        oBtn.onclink = async function () {
            const result = await myAxios.get("/user", {
                params: {
                    userId: "001",
                }
            })
            console.log("rsult", result);
        }
    </script>   
</body>
</html>